<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:61:"E:\static\tp5\public/../application/index\view\Chat\chat.html";i:1513670834;}*/ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>列表</title>
    <style type="text/css">
        .bg_box {
            width: 260px;
            height: 520px;
            border: 1px solid #e8e8e8;
        }

        .bg_box .top_bg_box {
            width: 260px;
            height: 114px;
            background: #d6d6d6;
        }

        .bg_box .top_bg_box .t_name {
            width: 260px;
            height: 44px;
        }

        .bg_box .top_bg_box .t_name .tname_l {
            width: 220px;
            height: 44px;
            color: #5595cb;
            font-size: 14px;
            font-family: "微软雅黑";
            text-indent: 16px;
            line-height: 44px;
            float: left;
        }

        .bg_box .top_bg_box .t_name .tname_l a {
            color: #5595cb;
            text-decoration: none;
        }

        .bg_box .top_bg_box .t_name .tname_r {
            width: 16px;
            height: 16px;
            margin-top: 10px;
            margin-right: 10px;
            float: right;
        }

        .bg_box .top_bg_box .t_m {
            width: 260px;
            height: 20px;
            line-height: 20px;
            color: #010101;
            font-size: 14px;
            font-family: "微软雅黑";
            text-indent: 16px;
        }

        .bg_box .top_bg_box .t_b {
            width: 252px;
            height: 44px;
            padding-left: 4px;
            padding-right: 4px;
            margin-top: 6px;
        }

        .bg_box .top_bg_box .t_b .t_b_list {
            width: 84px;
            height: 42px;
            border-bottom: 2px solid #d6d6d6;
            float: left;
        }

        .bg_box .top_bg_box .t_b .t_b_list.hover {
            width: 84px;
            height: 42px;
            border-bottom: 2px solid #3fdd86;
        }

        .bg_box .top_bg_box .t_b .t_b_list img {
            width: 30px;
            height: 30px;
            margin-left: 27px;
            margin-top: 6px;
        }

        .bg_box .main_box {
            width: 260px;
            height: 368px;
        }

        .bg_box .main_box .main_title {
            width: 260px;
            height: 30px;
            font-size: 12px;
            font-family: "微软雅黑";
            line-height: 30px;
            color: #999;
            margin-top: 8px;
            cursor: pointer;
        }

        .bg_box .main_box .main_title div {
            width: 20px;
            height: 20px;
            margin-top: 5px;
            margin-left: 10px;
            background: url(__STATIC_IMG__/images/img10.jpg) no-repeat;
            float: left;
            margin-right: 6px;
        }

        .bg_box .main_box .main_list {
            width: 260px;
            height: 50px;
        }

        .bg_box .main_box .main_list .img_box {
            width: 36px;
            height: 36px;
            border-radius: 36px;
            margin-top: 7px;
            margin-left: 16px;
            float: left;
        }

        .bg_box .main_box .main_list .img_box img {
            width: 36px;
            height: 36px;
            border-radius: 36px;
        }

        .bg_box .main_box .main_list .inf_box {
            width: 208px;
            height: 36px;
            float: left;
            padding-top: 7px;
        }

        .bg_box .main_box .main_list .inf_box .inf_list {
            width: 208px;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            font-family: "微软雅黑";
            padding-left: 6px; 
        }

        .color {
            color: #999999 !important;
        }

        .bg_box .bottom_box {
            width: 260px;
            height: 32px;
            background: #f6f6f6;
            padding-top: 8px;
        }

        .bg_box .bottom_box .img_box {
            width: 24px;
            height: 24px;
            margin-left: 12px;
            float: left;
        }

        .bg_box .switch_tab {
            display: none;
        }

        .bg_box .top_bg_box .t_m .sign {
            float: left
        }

        .bg_box .top_bg_box .t_m .dropdown {
            float: right;
            margin-right: 2px;
        }
        .bg_box .bottom_box .search_bom{
            float: left;
            margin-right: 15px;
            display: none;
        }
        .bg_box .bottom_box .search_bom input{ width: 100px; height: 15px;  margin-left: 8px; border: none;}
        .bg_box .bottom_box .search_bom .search_friends_group{ margin-bottom: 9px;margin-right: 2px }
        .bg_box .system_msg_tip {float: right;height: 100%;width: auto;margin-right: 4px;}
        .bg_box .system_msg_tip .chat_message_icon {font-size: 24px;cursor: pointer}
        .bg_box .system_msg_tip .system_message_num{cursor: pointer;position: relative;top: -13px;left: -7px;border-radius:45%;background-color:red;color: #FFFFFF;display: inline-block;font-size: 12px;text-align: center;font-family: '微软雅黑';width: 20px;}
        .chat_msg_num{display: inline-block; color: #FFFFFF; position: relative; top: -10px; left: 2px;background-color: #F15A24;border-radius: 10px;text-align: center;height: 24px;line-height: 24px;width: auto; }
    </style>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" /><script type="text/javascript" src="/static/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/dialog.css" />
    <link rel="stylesheet" type="text/css" href="/static/chat_talk.css" />
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css" /><script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/underscore/underscore.js"></script>
</head>

<body>
<div class="bg_box chat_page">
    <div class="top_bg_box">
        <div class="t_name">
            <div class="tname_l  name_user"><a href="<?php echo url('index'); ?>">点击登录</a></div>
            <div class="tname_r"><img src="__STATIC_IMG__/images/img8.jpg" width="16" height="16"/></div>
        </div>
        <div class="t_m">
            <span class="sign">爱你只因懂你</span>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" style="color: black" >添加组/好友<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li role="presentation" class="bg_add_group"><a role="menuitem" tabindex="-1" href="javascript:void(0)">添加组</a></li>
                    <li role="presentation" class="bg_add_friend"><a role="menuitem" tabindex="-1" href="javascript:void(0)">添加好友</a></li>
                     <li role="presentation" class="create_group"><a role="menuitem" tabindex="-1" href="javascript:void(0)">创建组</a></li>
                </ul>
            </div>
        </div>
        <div class="t_b">
            <div class="t_b_list hover" mark-step="chat_friend"><img src="__STATIC_IMG__/images/img5.jpg" width="30" height="30"/></div>
            <div class="t_b_list" mark-step="chat_group"><img src="__STATIC_IMG__/images/img6.jpg" width="30" height="30"/></div>
            <div class="t_b_list" mark-step="chat_unread_message"><img src="__STATIC_IMG__/images/img7.jpg" width="30" height="30"/></div>
        </div>
    </div>

    <div class="main_box  chat_friend_cate_list" mark-step="chat_friend_list">

        <div class="main_title">
            <div></div>
            好友分组
        </div>
    </div>
    <div class="main_box  switch_tab chat_group_cate_list" mark-step="chat_group_list">
    
    </div>
    <div class="main_box  switch_tab" mark-step="chat_unread_message_list">
        <div class="main_list">
            <div class="img_box"><img src="__STATIC_IMG__/images/images.png" width="500" height="500"/></div>
            <div class="inf_box">
                <div class="inf_list">雅梅</div>
                <div class="inf_list color">女</div>
            </div>
        </div>
    </div>
    <div class="bottom_box">
       <div class="img_box"><img src="__STATIC_IMG__/images/img9.jpg" width="24" height="24"/></div>
       <div class="search_bom layui-anim" data-anim="layui-anim-up">
           <input type="text" placeholder="请输入搜索内容" data-provide="typeahead">
           <button class="layui-btn layui-btn-mini search_friends_group">查找</button>
       </div>
        <div class="system_msg_tip"><i class="layui-icon chat_message_icon" title="消息盒子">&#xe645;</i><div class="system_message_num is_show_message"></div></div>
    </div>
</div>
<script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<link rel="stylesheet" type="text/css" href="/static/layer/theme/default/layer.css" /><script type="text/javascript" src="/static/layer/layer.js"></script><script type="text/javascript" src="/static/socketHandler.js"></script>
<link rel="stylesheet" type="text/css" href="/static/ChatGroup.css" />
<script type="text/javascript">
    $(function () {
        var dom = ['add_friend','apply_join_group','system_message_num','agree_refuse','chat_client','send_message'];
        var otherUri = {
            timeoutJumpUri: "<?php echo url('index','',true,true); ?>",
        };
        var otherEvents={
            chat_add_group:'bg_add_group',
            chat_add_friend:'bg_add_friend',
            chat_search_button:'search_friends_group',
            chat_agree_add_freind:'agree_add_freind',
            chat_agree_join_group:'agree_join_group',
            chat_refuse_add_friend:'refuse_add_friend',
            chat_refuse_join_group:'refuse_join_group',
            chat_tb_switch:'t_b_list',
            chat_talk_frame:'editor',
            chat_friend_talk_switch:'chat_friend',
            chat_frined_talk:'chat_client',
            chat_change_name:'name_user',
            chat_create_group:'create_group',
            chat_group_chat:'group_chat',
            chat_swiper_dom:'swiper_dom',
            chat_group_frame:'editor_group',
            chat_send_group:'send_group',
        };
        socketHandler._init(dom, otherUri,otherEvents,function(){
            return _;
        });
    });
</script>
</body>
</html>
